If we want our data to not be linked to our components in any way we could use an external store , but here we want to share the data between only the main component, the children and the grandchildren.

That's why we will use context here.

setContext() takes a key and a value as parameters. The context is set and get upon component initialization (whenever it is mounted in the DOM).

This means that we can set an initial value but after that if we increase count in one of the components the other won't change because we're getting the value by value, not by reference .

This is the reason we're going to use a store in combination with context.

<script>
	import Child from "./Child.svelte";
	import { setContext } from "svelte";

	let count = 10;

	setContext("value", count);
</script>

<div>
	App: {count}
	<button on:click={() => count++}>+</button>
	<button on:click={() => count--}>-</button>
</div>

<Child />

Let's try to sync the value using a store.

<script>
	import Child2 from "./Child2.svelte";
  import { writable } from "svelte/store";
	import { setContext } from "svelte";

	let count = writable(10);

	setContext("value", count);
</script>

<div>
	App: {$count}
	<button on:click={() => $count++}>+</button>
	<button on:click={() => $count--}>-</button>
</div>

<Child2 />

It works! If we want to sync values down the chain of components we can use store in combination with context .